/*
    JSPWiki - a JSP-based WikiWiki clone.

    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); fyou may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
*/

//bootstrap
p, .p {
  margin: 0 0 (@line-height-computed / 2);
}

/*
Headings:
    The headings h2, h3 and h4 get a {{clear:left}} so they can appear
    side by side with .commentboxes.

    The {{.editsection}} and {{.hashlink}} define the styling of the
    [[Edit] and # hash-hover link on each heading.

DOM structure:
(start code)
    h2[id="section-..."] Header-Title
        a.hashlink  #
        a.editsection[href="...&section=0"] [Edit]
(end)
*/
.hashlink { margin-left: 1em; }
.editsection, .hashlink {

    .btn; .btn-default; .btn-xs;
    margin-right: .25em;
    .transition(all 1s ease);
    &:hover { .opacity(1); border-color:transparent; }

}

/* The original jspwiki margins on headers were  somewhat larger then bootstrap
h2,h3,h4 {
    margin:1em 0 0.5em 0;
    line-height:1.5;
}
*/
h2,h3,h4 {

    .editsection, .hashlink { .opacity(0); }
    &:hover {
        .editsection, .hashlink { .opacity(.5); }
    }

}

.sidebar .hashlink, .sidebar .editsection, .panel-title .hashlink { .hidden; }



b, i {
    color:inherit;
}

//used by Search.jsp, HighlightQuery, TableX.Filter, ...
mark,
.highlight {
    background-color: @highlight !important;
}


//CHECKME
br { clear: both; }


//CHECKME
.tree, .tree ul {
    list-style: none;
}
.tree ul li {
    position: relative;
}
/* Inspired by: VM UI Framework */
/* horizontal connecting lines */
.tree ul li::before {
    background: @table-border-color;
    content: '';
    height: 1px;
    left: -1.5em;
    position: absolute;
    top: 0.9em;
    width: 1em;
}
/* vertical connecting lines */
.tree ul li::after {
    background: @table-border-color;
    content: '';
    height: 100%;
    left: -1.5em;
    position: absolute;
    top: 0;
    width: 1px;
}
/* closing vertical connecting corner */
.tree ul li:last-child::after {
    height: 1em;
}

//dl { .dl-horizontal; }
dl dd { margin-left: 2em; }   //reset flat style of bootstrap/type


.hr {
  display: block;
  margin-top: 10px;
  border: 0;
  border-top: 1px solid @hr-border;
}


/*
PRE and xflow:
    Pre-formatted text and code blocks.

    pre - preformatted block
    .pre - preformatted inline block
    tt - teletype, monospace inline block

    The ''.xflow'' class ensures a browser compatible overflow of wide content.
    By default the page height depends on the content, the width should not
    go beyond the width of the display. So, if needed, add a horizontal scroll bar.
    Does have some IE specific hacks.

    Applicable to preformatted blocks (pre, tt, code), and the main page content
    elements such as #pagecontent, #findcontent, #info, #attach, ...

*/


//inline code: jspwiki uses <tt> ; styles copied from bootstrap/code.less
tt {
  padding: 2px 4px;
  font-size: 90%;
  color: @code-color;
  background-color: @code-bg;
  white-space: nowrap;
  border-radius: @border-radius-base;
}
//  => reuse styling of pre

//list-unstyled : bootstrap
//list-hover
.list-hover {
    li:hover {
        background-color:@dropdown-link-hover-bg;
        a { text-decoration:none; }
    }
}
.list-nostyle { list-style: none; }



/*
Links:
    The reusable {{.hover}} class provides generic support for
    mouse-hover styling on any DOM element. (IE only supports :hover on <a>)

>   a:link { ... }
>   a:hover { ... }
>   a:focus { ... }
>   a:visited { ... }
>   a:active { ... }

>   a.wikipage
>   a.external
>   a.interwiki
>   a.createpage
*/


//generic behavior -- why not part of bootstrap ??
a:hover { cursor:pointer; }

//mimic :hover, for old ie cases which may not yet support :hover
.hover { background-color:@wiki-hover; }

.createpage {
    color: @wiki-link-createpage;
    border-bottom: 1px dashed @wiki-link-createpage;
    &:hover {
        color:darken(@wiki-link-createpage,10%);
        text-decoration:none;
    }
}


//TODO: Overrule standard small red arrow; replace by ...  FIXME
img.outlink { display:none; }
a.external:after {
    content: "\279A";
    //content: url("");
    //content:url();
}
a.attachment + a.infolink,
a.attachment + button + a.infolink {
   .icon--all;
   &:after {
        margin-left:.1em;
        content:"\e614"; //.icon-paper-clip
    }
    > img { display:none; }
}


/*
Interwiki link
    Reader : show pages without sidebar,minimal header/footer
    <a class="interwiki" href="Wiki.jsp?page=XXX&skin=reader">XXX</a>
*/
a.interwiki[href$="skin=reader"]:hover {
    border-bottom: 1px dashed @link-hover-color;
}
a.interwiki[href$="skin=raw"]:hover {
    border-bottom: 1px dotted @link-hover-color;
}

a.reader-view > [class^="icon-"] { color:@link-color; }


/*
Footnotes
*/
.footnote, .footnoteref {
    .small;
    vertical-align:super;
}
.footnoteref { padding:0 .3em; }

/*
Images
*/
img {
    &.inline { .img-responsive; /*max-width:100%;*/ }
}
img { position:relative;}
img:before {
   content:"\e607  ";
   font-family: FontJspwiki;
   color:@red;
}
img:after {
    content: "Broken Image: [" attr(alt) "]";
    position: absolute;
    display:inline-block; width:100%;height:100%;
    background:@white;
    left:20px;padding-top:.5em;
    color:@red;
}

//img.inline
//img.outlink
//img.attlink


// Utility class to support un-scaled, scrollable images,
.scrollable-image {

    overflow:scroll;
    img.inline { width:auto; max-width:none; }

}



/*
Section: Reusable Styles
    Various reusable css classes for small text, sub- and super-text,
    strike-through formatting, centered text, quotes, ....

    The standard error, warning and information boxes are defined here as well.
*/

//.sub { .small; vertical-align:sub; }
//.sup { .small; vertical-align:super; }
// Prevent impact on line-height See http://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/
.sup, .sub {
    .small;
    //vertical-align: baseline; //standard.
    position: relative;
    top: -0.4em;
}
.sub { top: 0.4em; }


.caps { font-variant: small-caps; }

.strike { text-decoration:line-through; }

//see also bootstrap .text-center
.center {
    text-align:center;
    table { text-align:left; }
}
.justify {
    text-align:justify;
}

// %%dropcaps .. /%
// CSS3:  div.dropcap:first-child:first-letter. See http://css-tricks.com/snippets/css/drop-caps/
div.dropcaps {
    .p;
    > span.dropcaps {
        float: left;
        color: @dropcaps-color;
        padding-right: @table-cell-padding;
        font-family: @dropcaps-font-family;
        font-size: @dropcaps-font-size;
        font-weight: @dropcaps-font-weight;
        line-height: 80%;
        text-shadow: 2px 2px 1px rgba(0,0,0,.25);
    }
}


//%%quote .. /%
//.quote is replaced by <blockquote>, to reuse bootstraps styling

.page-break {
    display:block;
    height:2px;
    // background:url(page-break.jpg) 0 center repeat-x;
    border-top:1px dashed @table-border-color;
    margin:1em 0;

    &:hover:after {
        content: "page break";
        text-align: center;
        display: block;
        color: @table-border-color;
        .small;
    }

}

//checkme - should be defined in bootstrap
.bg-success { background-color: @state-success-bg; }
.bg-info    { background-color: @state-info-bg; }
.bg-warning { background-color: @state-warning-bg; }
.bg-danger  { background-color: @state-danger-bg; }


.ltr { direction:ltr; }
.rtl { direction:rtl; }

//use bootstraps general .show, .hidden, .invisible
//Classes used by the TASKS plugin  (.hide, .invisible)
//ok in bootstrap

//checkme: still used?
.accesskey { text-decoration:underline; }

.changenote { max-width:240px; font-style: italic; }

.nowrap { white-space:nowrap; }

[class^=tangle-] { background: @yellow; }

//TODO: why not use .panel iso .alert as base for these communication boxes
.default, .success, .information, .info,  .warning, .error, .danger {
    .alert;
    clear:both;
    display:block;
}
//support inline information blocks
span.default, span.success, span.information, span.info,  span.warning, span.error, span.danger {
    display:inline;
    padding: .05em .25em;
}

.default {
    .alert-variant(@btn-default-bg; @btn-default-border;@btn-default-color);
}
.success            { .alert-success; }
.info, .information { .alert-info; }
.warning            { .alert-warning; }
.error, .danger     { .alert-danger; }

//CHECKME: make sure to fill the table cell with the background color
td .success, td .information, td .warning, td .error { margin:0; }
//BETTER:  td > .alert { margin:0; }


/*
Style: CAPTCHA tables and images
*/
.asirraCaptcha img { width: @wiki-captcha-width; }
.asirraCaptcha td {
    background:@wiki-captcha-bg;
    border:1px solid @table-border-color;
    padding:1em;
}


//utility class
.under-construction {
    display:block;
    width:100%;
    text-align:center;
    padding:0 1em;
    .progress;
    .progress-bar-variant(@yellow);
    .progress-striped .progress-bar;
    .progress.active .progress-bar;

    &:after {
        content:"UNDER CONSTRUCTION";
        letter-spacing:1ex;
        font-weight:bold;
    }
}

